// src/pages/Settings.js
import React, { useState, useEffect } from 'react';
import { Tabs, Form, Input, Switch, Select, Button, Card, message } from 'antd';
import axios from 'axios';

const { TabPane } = Tabs;
const { Option } = Select;

const Settings = () => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  // const [setSettings] = useState({});

  // 加载当前设置
  useEffect(() => {
    fetchSettings();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const fetchSettings = async () => {
    setLoading(true);
    try {
      const response = await axios.get('/api/settings');
      console.log(response)
      // setSettings(response.data.setting);
      form.setFieldsValue(response.data.setting);
    } catch (error) {
      message.error('加载设置失败');
    } finally {
      setLoading(false);
    }
  };

  // 保存设置
  const handleSave = async () => {
    try {
      const values = await form.validateFields();
      setLoading(true);
      
      await axios.put('/api/settings', values);
      message.success('设置已保存');
      
      // 更新本地状态
      // setSettings(values);
      form.setFieldsValue(values)
    } catch (errorInfo) {
      console.log('Validation failed:', errorInfo);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      <Card title="系统设置" extra={<Button type="primary" onClick={handleSave} loading={loading}>保存设置</Button>}>
        <Tabs defaultActiveKey="basic">
          {/* 基本设置 */}
          <TabPane tab="基本设置" key="basic">
            <Form
              form={form}
              layout="vertical"
              style={{ maxWidth: 800 }}
            >
              <Form.Item
                name="siteName"
                label="网站名称"
                rules={[{ required: true, message: '请输入网站名称' }]}
              >
                <Input placeholder="请输入网站名称" />
              </Form.Item>
              
              <Form.Item
                name="siteDescription"
                label="网站描述"
              >
                <Input.TextArea rows={4} placeholder="请输入网站描述" />
              </Form.Item>
              
              <Form.Item
                name="siteUrl"
                label="网站URL"
                rules={[{ type: 'url', message: '请输入有效的URL' }]}
              >
                <Input placeholder="请输入网站URL" />
              </Form.Item>
              
              <Form.Item
                name="logo"
                label="网站Logo"
              >
                <Input placeholder="Logo图片URL" />
              </Form.Item>
            </Form>
          </TabPane>
          
          {/* 邮件设置 */}
          <TabPane tab="邮件设置" key="email">
            <Form
              form={form}
              layout="vertical"
              style={{ maxWidth: 800 }}
            >
              <Form.Item
                name="smtpHost"
                label="SMTP服务器"
                rules={[{ required: true, message: '请输入SMTP服务器' }]}
              >
                <Input placeholder="请输入SMTP服务器地址" />
              </Form.Item>
              
              <Form.Item
                name="smtpPort"
                label="SMTP端口"
                rules={[{ required: true, message: '请输入SMTP端口' }, { type: 'number' }]}
              >
                <Input type="number" placeholder="请输入SMTP端口" />
              </Form.Item>
              
              <Form.Item
                name="smtpUser"
                label="邮箱账号"
                rules={[{ required: true, message: '请输入邮箱账号' }]}
              >
                <Input placeholder="请输入邮箱账号" />
              </Form.Item>
              
              <Form.Item
                name="smtpPass"
                label="邮箱密码"
                rules={[{ required: true, message: '请输入邮箱密码' }]}
              >
                <Input.Password placeholder="请输入邮箱密码" />
              </Form.Item>
              
              <Form.Item
                name="smtpSecure"
                label="使用SSL"
              >
                <Switch defaultChecked={true} />
              </Form.Item>
            </Form>
          </TabPane>
          
          {/* 主题设置 */}
          <TabPane tab="主题设置" key="theme">
            <Form
              form={form}
              layout="vertical"
              style={{ maxWidth: 800 }}
            >
              <Form.Item
                name="primaryColor"
                label="主色调"
                rules={[{ required: true, message: '请选择主色调' }]}
              >
                <Select placeholder="请选择主色调">
                  <Option value="#165DFF">蓝色</Option>
                  <Option value="#F5222D">红色</Option>
                  <Option value="#52C41A">绿色</Option>
                  <Option value="#FAAD14">橙色</Option>
                  <Option value="#722ED1">紫色</Option>
                </Select>
              </Form.Item>
              
              <Form.Item
                name="themeMode"
                label="主题模式"
                rules={[{ required: true, message: '请选择主题模式' }]}
              >
                <Select placeholder="请选择主题模式">
                  <Option value="light">亮色</Option>
                  <Option value="dark">暗色</Option>
                </Select>
              </Form.Item>
              
              <Form.Item
                name="layoutMode"
                label="布局模式"
                rules={[{ required: true, message: '请选择布局模式' }]}
              >
                <Select placeholder="请选择布局模式">
                  <Option value="side">侧边菜单</Option>
                  <Option value="top">顶部菜单</Option>
                </Select>
              </Form.Item>
              
              <Form.Item
                name="fixedHeader"
                label="固定头部"
              >
                <Switch defaultChecked={true} />
              </Form.Item>
              
              <Form.Item
                name="fixedSidebar"
                label="固定侧边栏"
              >
                <Switch defaultChecked={true} />
              </Form.Item>
            </Form>
          </TabPane>
        </Tabs>
      </Card>
    </div>
  );
};

export default Settings;